<template>
  <div class="base">
    <div class="header">
      <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: large;">
        <div>
          风冷监测
        </div>
      </div>
    </div>
    <div style="">
      <!-- <el-descriptions :column="1" :size="size" border>
        <el-descriptions-item label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              出酒温度
            </div>
          </template>
{{ CQWD }} ℃
</el-descriptions-item>
<el-descriptions-item>
  <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              实时酒糟温度
            </div>
          </template>
  {{ JZWD }} ℃
</el-descriptions-item>
<el-descriptions-item>
  <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              风机频率
            </div>
          </template>
  {{ FJPL }} HZ
</el-descriptions-item>
<el-descriptions-item>
  <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              实时环境温度
            </div>
          </template>
  {{ HJWD }} ℃
</el-descriptions-item>
<el-descriptions-item>
  <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              设定出酒温度
            </div>
          </template>
  {{ SDCJWD }}℃
</el-descriptions-item>
</el-descriptions> -->
      <el-descriptions :column="1" border>
        <!-- 实时出酒温度 -->
        <el-descriptions-item class="data-card" label-class-name="my-label">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <TemperatureIcon />
              </el-icon>
              <span class="label-text">实时出酒温度</span>
            </div>
          </template>
          <div class="value-display">
            <span class="value">{{ CQWD }}</span>
            <span class="unit">℃</span>
          </div>
        </el-descriptions-item>

        <!-- 实时酒糟温度 -->
        <el-descriptions-item class="data-card">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <SecondaryTempIcon />
              </el-icon>
              <span class="label-text">实时酒糟温度</span>
            </div>
          </template>
          <div class="value-display">
            <span class="value">{{ JZWD }}</span>
            <span class="unit">℃</span>
          </div>
        </el-descriptions-item>

        <!-- 风机频率 -->
        <el-descriptions-item class="data-card">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <WindPower />
              </el-icon>
              <span class="label-text">风机频率</span>
            </div>
          </template>
          <div class="value-display">
            <span class="value">{{ FJPL }}</span>
            <span class="unit">Hz</span>
            <div class="wave-indicator"></div>
          </div>
        </el-descriptions-item>

        <!-- 实时环境温度 -->
        <el-descriptions-item class="data-card">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <Sunny />
              </el-icon>
              <span class="label-text">实时环境温度</span>
            </div>
          </template>
          <div class="value-display">
            <span class="value">{{ HJWD }}</span>
            <span class="unit">℃</span>
          </div>
        </el-descriptions-item>

        <!-- 目标温度设置 -->
        <el-descriptions-item class="data-card">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <Aim />
              </el-icon>
              <span class="label-text">目标出酒温度</span>
            </div>
          </template>
          <div class="value-display">

            <span class="value">{{ SDCJWD }}</span>
            <span class="unit">℃</span>
          </div>
        </el-descriptions-item>
        <!-- 喷雾电磁阀 -->
        <el-descriptions-item class="data-card">
          <template #label>
            <div class="label-wrap">
              <el-icon :style="iconStyle">
                <Tools />
              </el-icon>
              <span class="label-text">喷雾电磁阀</span>
            </div>
          </template>
          <div class="value-display">
            <div :style="{ color: Y1 ? 'green' : 'red', display: 'flex', alignItems: 'center' }">
              <div
                :style="{ width: '1px', height: '1px', borderRadius: '5px', border: `5px solid  ${Y1 ? 'green' : 'red'}` }">
              </div>
              <span style="margin-left: 10px;"> {{ Y1 ? '开启' : '关闭' }}</span>

            </div>

          </div>

        </el-descriptions-item>
      </el-descriptions>

    </div>

    <div style="display: flex;padding: 10px 10px 0 10px;flex-direction: column;">
      <div style="display: flex;align-items: center;justify-content: space-between;">
        <div>
          开始时间：
          <el-date-picker v-model="start" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
            date-format="MMM DD, YYYY" time-format="HH:mm:ss" :editable="false" :clearable="false"
            @change="changeTime" />
        </div>

        <el-button type="primary" style="margin-left: 10px;" @click="clickTime('t')">今天</el-button>
      </div>
      <div style="display: flex;margin-top: 5px;align-items: center;justify-content: space-between;">
        <div>
          结束时间：
          <el-date-picker v-model="end" type="datetime" placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
            date-format="MMM DD, YYYY" time-format="HH:mm:ss" :editable="false" :clearable="false"
            @change="changeTime" />
        </div>

        <el-button type="primary" style="margin-left: 10px;" @click="clickTime('y')">昨天</el-button>
      </div>

    </div>
    <div>
      <Lines :width="`100vw`" :height="'400px'" :arr="arrBuMen" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";

import Lines from "@/components/ChartsLines.vue";
import {
  Histogram as TemperatureIcon,
  PieChart as SecondaryTempIcon,
  WindPower,
  Sunny,
  Aim,
  Tools

} from '@element-plus/icons-vue'

import { ElMessage, type TagProps } from 'element-plus'
import { dayjs } from 'element-plus'

import axios from 'axios'
const points = [
  'CQWD',//实时出酒温度
  // 'JZWD',//实时酒遭温度
  'HJWD',//实时环境温度
  // 'FJPL',//风机频率
  // 'SDCJWD',//设定出酒温度
  'Y1',//喷雾电磁阀
]

const iconStyle = {
  marginRight: '8px',
  fontSize: '18px'
}
interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: '喷雾电磁阀', type: 'primary' },
])

const CQWD = ref('-') // 实时出酒温度
const JZWD = ref('-')// 实时酒糟温度
const FJPL = ref('-') //风机频率
const HJWD = ref('-') // 环境温度
const SDCJWD = ref('-') //目标温度
const Y1 = ref(0)
const start = ref(dayjs().format("YYYY-MM-DD") + '00:00:00');
const end = ref(dayjs().format("YYYY-MM-DD") + '23:59:59');

const arrBuMen = ref<any>([

])

onMounted(() => {
  fetchData(0)
  fetchData(1)
  fetchData(2)
  fetchBatchLatest()
});

let tmpArr: any = []

const fetchData = async (index: number) => {
  let params = {
    begin: dayjs(start.value).format("YYYY-MM-DD HH:mm:ss"),
    end: dayjs(end.value).format("YYYY-MM-DD HH:mm:ss"),
    device: 'P2_CTL_103',
    point: points[index],
  }
  const { status, data: { code, data: list } } = await axios({
    method: 'GET',
    url: '/api/devices/timeseries',
    params
  })
  if (status == 200) {
    if (code == 200) {
      tmpArr.push({ index: index, value: list })
    }
  }
  if (tmpArr.length == 3) {
    arrBuMen.value = tmpArr
  }
}
//	/device-service/devices/batch_latest
const fetchBatchLatest = async () => {
  let params = {
    names: ['P2_CTL_103'],
  }
  // https://ny.moutai.com.cn/api/devices/timeseries?begin=2025-08-05 00:00:00&end=2025-08-06 00:00:00&device=P1ZH01SC_A5_PW&point=Flow
  // /device-service/devices/batch_latest
  console.log('data->', import.meta.env)
  const { status, data } = await axios({
    method: 'POST',
    url: '/device-service/devices/batch_latest',
    data: params
  })
  if (status == 200) {
    // console.log('data->', data)
    if (data) {
      const { points } = data['P2_CTL_103']
      Object.keys(points).map(((k: any) => {
        // console.log('key:', k, points[k])
        // const value = points[k]?.value + ''
        // const item = points[k]
        const { value } = points[k]
        if (value) {
          console.log(value)
        }
        switch (k) {
          case 'CQWD':
            CQWD.value = (value / 10).toFixed(2)
            break
          case 'JZWD':
            JZWD.value = (value / 10).toFixed(2)
            break
          case 'FJPL':
            FJPL.value = value + ''
            break
          case 'SDCJWD':
            SDCJWD.value = (value / 10).toFixed(2)
            break
          case 'Y1':
            Y1.value = value
            break
        }
      }))
    }
  }
}

const changeTime = () => {
  tmpArr = []
  arrBuMen.value = []
  let time1 = start.value
  let time2 = end.value
  let tmp = ''
  if (dayjs(time1).isAfter(time2)) {
    tmp = time2
    time2 = time1
    time1 = tmp
  }
  start.value = time1
  end.value = time2

  fetchData(0)
  fetchData(1)
  fetchData(2)
}

const clickTime = (t: string) => {
  if (t == 't') {
    start.value = dayjs().format("YYYY-MM-DD") + '00:00:00';
    end.value = dayjs().format("YYYY-MM-DD") + '23:59:59';
  } else {
    start.value = dayjs().subtract(1, 'day').format("YYYY-MM-DD") + '00:00:00';
    end.value = dayjs().subtract(1, 'day').format("YYYY-MM-DD") + '23:59:59';
  }

  changeTime()
}

</script>

<style scoped>
.base {
  background-color: rgb(3, 12, 49);
  color: rgba(102, 255, 255, 1);
  width: 100vw;
  height: 100vh;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}

.header {
  background-color: #024bc2;
  position: relative;
  height: 50px;
  line-height: 50px;
}

:deep(.my-label) {
  width: 150px;
}

.label-wrap {
  display: flex;
  align-items: center;
  width: 150px;
}

.label-text {
  text-align: center;
}

.unit {
  margin-left: 10px;
}
</style>
